<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('修改语音服务商')" />
    <th:block th:include="include :: select2-css"/>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-provider-edit" th:object="${voiceProvider}">
            <input name="id" th:field="*{id}" type="hidden">
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">使用状态：0默认；-1关闭；0-100概率：</label>
                <div class="col-sm-8">
                    <input name="voiceUse" th:field="*{voiceUse}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">服务商：</label>
                <div class="col-sm-8">
                    <select name="voiceName" th:with="type=${@dict.getType('sys_provider')}" class="form-control">
                        <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictLabel}"
                                th:field="*{voiceName}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">超时时间(秒)：</label>
                <div class="col-sm-8">
                    <input name="timeout" th:field="*{timeout}" class="form-control" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">语种：</label>
                <div class="col-sm-8">
                    <select id="voiceLanguages" name="voiceLanguages" class="js-select2" multiple>
                        <option value="">-----多选-----</option>
                        <option th:each="dict : ${@dict.getType('sys_languages')}" th:value="${dict.dictLabel}" th:text="${dict.dictLabel}"
                                th:selected="${languagesChecked.contains(dict.dictLabel)}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">采样率：</label>
                <div class="col-sm-8">
                    <select id="voiceSampling" name="voiceSampling" class="js-select2" multiple>
                        <option value="">-----多选-----</option>
                        <option th:each="dict : ${@dict.getType('sys_sampling')}" th:value="${dict.dictLabel}" th:text="${dict.dictLabel}"
                                th:selected="${samplingChecked.contains(dict.dictLabel)}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">Bit位：</label>
                <div class="col-sm-8">
                    <select id="voiceBit" name="voiceBit" class="js-select2" multiple>
                        <option value="">-----多选-----</option>
                        <option th:each="dict : ${@dict.getType('sys_bit')}" th:value="${dict.dictLabel}" th:text="${dict.dictLabel}"
                                th:selected="${bitChecked.contains(dict.dictLabel)}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">声道：</label>
                <div class="col-sm-8">
                    <select id="voiceTrack" name="voiceTrack" class="js-select2" multiple>
                        <option value="">-----多选-----</option>
                        <option th:each="dict : ${@dict.getType('sys_track')}" th:value="${dict.dictLabel}" th:text="${dict.dictLabel}"
                                th:selected="${trackChecked.contains(dict.dictLabel)}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">时长（小时）：</label>
                <div class="col-sm-8">
                    <input name="voiceDuration" th:field="*{voiceDuration}" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">文件大小（MB）：</label>
                <div class="col-sm-8">
                    <input name="voiceSize" th:field="*{voiceSize}" class="form-control" type="text" required>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">文件格式：</label>
                <div class="col-sm-8">
                    <select id="voiceFormat" name="voiceFormat" class="js-select2" multiple>
                        <option value="">-----多选-----</option>
                        <option th:each="dict : ${@dict.getType('sys_format')}" th:value="${dict.dictLabel}" th:text="${dict.dictLabel}"
                                th:selected="${formatChecked.contains(dict.dictLabel)}"></option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-3 control-label is-required">转写URL：</label>
                <div class="col-sm-8">
                    <input name="voiceUrl" th:field="*{voiceUrl}" class="form-control" type="text" required>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: select2-js"/>
    <script th:inline="javascript">
        var prefix = ctx + "product/provider";
        $("#form-provider-edit").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/saveOrUpdate", $('#form-provider-edit').serialize());
            }
        }

        $(".js-select2").select2({
        closeOnSelect: false,
        placeholder: "请选择",
        allowHtml: true,
        allowClear: true,
        tags: true
    });
    </script>
</body>
<style>
    body {
        font-family: 'Ubuntu', sans-serif;
        font-weight: bold;
    }

    .select2-container {
        min-width: 400px;
    }

    .select2-results__option {
        padding-right: 20px;
        vertical-align: middle;
    }

    .select2-results__option:before {
        content: "";
        display: inline-block;
        position: relative;
        height: 20px;
        width: 20px;
        border: 2px solid #e9e9e9;
        border-radius: 4px;
        background-color: #fff;
        margin-right: 20px;
        vertical-align: middle;
    }

    .select2-results__option[aria-selected=true]:before {
        font-family: fontAwesome;
        content: "\f00c";
        color: #fff;
        background-color: #f77750;
        border: 0;
        display: inline-block;
        padding-left: 3px;
    }

    .select2-container--default .select2-results__option[aria-selected=true] {
        background-color: #fff;
    }

    .select2-container--default .select2-results__option--highlighted[aria-selected] {
        background-color: #eaeaeb;
        color: #272727;
    }

    .select2-container--default .select2-selection--multiple {
        margin-bottom: 10px;
    }

    .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
        border-radius: 4px;
    }

    .select2-container--default.select2-container--focus .select2-selection--multiple {
        border-color: #f77750;
        border-width: 2px;
    }

    .select2-container--default .select2-selection--multiple {
        border-width: 2px;
    }

    .select2-container--open .select2-dropdown--below {

        border-radius: 6px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);

    }

    .select2-selection .select2-selection--multiple:after {
        content: 'hhghgh';
    }

    /* select with icons badges single*/
    .select-icon .select2-selection__placeholder .badge {
        display: none;
    }

    .select-icon .placeholder {
        display: none;
    }

    .select-icon .select2-results__option:before,
    .select-icon .select2-results__option[aria-selected=true]:before {
        display: none !important;
        /* content: "" !important; */
    }

    .select-icon .select2-search--dropdown {
        display: none;
    }

    .select2-container--default .select2-selection--multiple .select2-selection__choice {
        background-color: rgba(179, 26, 26, 0);
        border-color: #273b37;
        padding: 1px 10px;
        color: #000000
    }
    .select2-container--default .select2-selection--multiple .select2-selection__rendered {
        overflow-y: auto;
        max-height: 150px;
    }
</style>
</html>